import React from 'react'
import styles from "../../css/AddCuiji.module.css";
import Config from "../../Config";

import Panel from '../components/Picker/Panel'
import DateTimePanel from '../components/Picker/DateTimePanel'
import DatePanel from '../components/Picker/DatePanel'
class SelectorBottom extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        panelOpen: false
      }
    }
    click = () => {
      this.setState({
        panelOpen: true
      })
    }
    getValue = (e) =>{
        const item = {}
        item[this.props.type]  = {
            value:e,
        }
        if(this.props.getSelected){
          this.props.getSelected(item)
        }
    }
    render() {
      const { name, des,list,type } = this.props
      return (
        <div className={styles['cuiji_item_2']}>
          <div className={styles['cuiji_item_key']}>
            {name}
          </div>
          <div onClick={this.click} className={styles['cuiji_item_click']} style={{ color: Config.fontColor1 }}>
            {this.state.itemSelected?this.state.itemSelected:des}
          </div>
          {des === '选择时间' &&
            <DateTimePanel
              show={this.state.panelOpen}
              onCancel={() => this.setState({ panelOpen: false })}
              onConfirm={value => {
                this.setState({ itemSelected: value.pass, panelOpen: false });
                this.getValue(value.pass)
                
              }}
              minYear={parseInt(new Date().getFullYear(), 10)}
              maxYear={parseInt(new Date().getFullYear(), 10) + 1}
            />
          }
          {des === '请选择' &&type!=='date'&&
            <Panel
              show={this.state.panelOpen}
              onCancel={() => this.setState({ panelOpen: false })}
              onConfirm={value => {
                this.setState({ itemSelected: value.pass, panelOpen: false });
                this.getValue(value.pass)
              }}
              list={list}
  
            />
          }
           {des === '请选择' &&type==='date'&&
            <DatePanel
              show={this.state.panelOpen}
              onCancel={() => this.setState({ panelOpen: false })}
              onConfirm={value => {
                this.setState({ itemSelected: value.pass, panelOpen: false });
                this.getValue(value.pass)
              }}
              minYear={parseInt(new Date().getFullYear(), 10)}
              maxYear={parseInt(new Date().getFullYear(), 10) + 1}
            />
          }
        </div>
      )
    }
  }
  export default SelectorBottom